<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>

    <title>Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="static/bootstrap-5.1.3-dist/bootstrap.min.css" rel="stylesheet">
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>
    <link href="static/css/admin.css" rel="stylesheet">
    <script src="static/js/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        function selectAllUser() {
            $.ajax({
                url: "selectAll",
                type: "post",
                data: JSON.stringify({}),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        json2table(data);
                    }
                }
            });
        }
        function selectUserByName()  {
            var name = $('#selectByName').val();
            if ( name === "") {
                failMsgAlert("账号与用户名为空,无响应");
                selectAllUser();
                return false;
            }
            $.ajax({
                url: "selectByName",
                type: "post",
                data: JSON.stringify({
                    name : name
                }),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        succMsgAlert("查询到了"+Object.keys(data).length+"条数据!");
                        json2table(data);
                    }
                }
            });
        }

        function getUpdateUserInfo() {
            var index = event.srcElement.parentElement.parentElement.rowIndex;
            var userId = document.getElementById("user-table").rows[index].cells[0].innerText;
            var userCode = document.getElementById("user-table").rows[index].cells[1].innerText;
            var userName = document.getElementById("user-table").rows[index].cells[2].innerText;
            var userAvatar = document.getElementById("user-table").rows[index].cells[3].innerText;
            $('#UpdateUserId').val(userId);
            $('#UpdateUserCode').val(userCode);
            $('#UpdateUserName').val(userName);
            $('#UpdateUserAvatar').val(userAvatar);
        }

        function getDeleteUserInfo() {
            var index = event.srcElement.parentElement.parentElement.rowIndex;
            var userId = document.getElementById("user-table").rows[index].cells[0].innerText;
            var userCode = document.getElementById("user-table").rows[index].cells[1].innerText;
            var userName = document.getElementById("user-table").rows[index].cells[2].innerText;

            $('#DeleteUserId').val(userId);
            $('#DeleteUserCode').val(userCode);
            $('#DeleteUserName').val(userName);
        }

        function json2table(data) {
            var trs = "";
            var tbody = $("#user-tbody");
            tbody.empty()
            $.each(data, function (n, value) {
                trs +="<tr><td>" +
                    value.id +
                    "</td><td>" +
                    value.code +
                    "</td><td>" +
                    value.name +
                    "</td><td>" +
                    value.userAvatar+
                    "</td><td>" +
                    "<button type=\"button\" class=\"btn btn-primary\" " +
                    "onclick=\"getUpdateUserInfo()\" data-bs-toggle=\"modal\" data-bs-target=\"#UpdateUserModal\"" + ">" +
                    "修改</button>" +
                    "<button type=\"button\" class=\"btn btn-primary\" " +
                    "onclick=\"getDeleteUserInfo()\" data-bs-toggle=\"modal\" data-bs-target=\"#DeleteUserModal\"" + ">" +
                    "删除</button>" +
                    "</td></tr>";
            });
            tbody.append(trs);
        }

        function updateUser() {
            var userId = $('#UpdateUserId').val();
            var userCode = $('#UpdateUserCode').val();
            var userName = $('#UpdateUserName').val();
            var userAvatar = $('#UpdateUserAvatar').val();

            $.ajax({
                url: "update",
                type: "post",
                data: JSON.stringify({
                    id : userId,
                    code : userCode,
                    name : userName,
                    userAvatar : userAvatar,
                }),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    if (data != false) {
                        succMsgAlert("完成修改!");
                        ReFreshCurrentPage();
                    }
                }
            });
        }

        function addUser() {
            var userCode = $('#AddUserCode').val();
            var userName = $('#AddUserName').val();
            var userPassword = $('#AddUserPassword').val();
            var userAuthority = $("input[name='AddUserAuthority']:checked").val();
            var userAvatar = $('#AddUserAvatar').val();
            var userGender = $("input[name='AddUserGender']:checked").val();
            $.ajax({
                url: "add",
                type: "post",
                data: JSON.stringify({
                    code : userCode,
                    name : userName,
                    password : userPassword,
                    authority : userAuthority,
                    userAvatar : userAvatar,
                    gender : userGender
                }),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    if (data != false) {
                        succMsgAlert("添加成功!");
                        ReFreshCurrentPage();
                    } else {
                        failMsgAlert("用户添加失败!");
                    }
                }
            });
        }

        function deleteUser() {
            var userId = $('#DeleteUserId').val();
            $.ajax({
                url: "delete",
                dataType:"JSON",
                type: "post",
                data: JSON.stringify({
                    id: userId
                }),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    if (data != false) {
                        succMsgAlert("删除成功");
                        ReFreshCurrentPage()
                    }
                }
            });
        }

        function selectUserByPage(idx) {
            var size = 2;
            var beginIdx = (idx-1) * size;
            $.ajax({
                url: "page",
                type: "post",
                data: JSON.stringify({
                    idx : idx,
                    size : size,
                    beginIdx : beginIdx
                }),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        json2table(data);
                        managePage(Object.keys(data).length < size, idx);
                    }
                }
            });
        }

        function succMsgAlert(str) {
            var stradd = "<div class=\"alert alert-success alert-dismissible\">" +
                "<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"></button>" +
                "<strong>成功!</strong>" + str + "</div>"
            var alert = $('#msg-alert');
            alert.empty();
            alert.append(stradd);

        }

        function failMsgAlert(str) {
            var stradd = "<div class=\"alert alert-danger alert-dismissible\">" +
                "<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"></button>" +
                "<strong>失败!</strong>" + str + "</div>"
            var alert = $('#msg-alert');
            alert.empty();
            alert.append(stradd);
            // window.setTimeout(function () {
            //     $('#msg-alert').empty();
            // }, 2000);
        }

        function validIn() {
            var btn = $('#addUserBtn');
            btn.attr("disabled",true);
            btn.empty();
            btn.append("输入了空的账号、名称或密码");
            if ($("#AddUserCode").val()!=="" && $("#AddUserName").val()!=="" && $("#AddUserPassword").val()!=="")
            {
                btn.empty();
                btn.append("确定");
                btn.removeAttr("disabled");
            }
        }

        function UpdValidIn() {
            var btn = $('#UpdateUserBtn');
            btn.attr("disabled",true);
            btn.empty();
            btn.append("输入了空的账号、名称或密码");
            if ($("#UpdateUserCode").val()!=="" && $("#UpdateUserName").val()!=="" && $("#UpdateUserPassword").val()!=="")
            {
                btn.empty();
                btn.append("确定");
                btn.removeAttr("disabled");
            }
        }

        function managePage(isLessThanSize, idx) {
            for (i = 0; i <= 6; i++){
                var t = $('#li'+i);
                t.removeClass('active');
                t.removeAttr('disabled');
            }
            var text; var activeIdx;
            if (idx >= 4)
            {
                activeIdx = 3;
                text = [idx-2,idx-1,idx,idx+1,idx+2];
            }
            else {
                activeIdx = idx;
                text = [1,2,3,4,5];
            }
            for (i = 1; i <= 5; i++) {
                $('#li'+i).text(text[i-1]);
            }
            $('#li'+activeIdx).addClass('active');
            if (activeIdx === 1) $('#li0').attr('disabled',true);
            if (isLessThanSize) {
                for (i = activeIdx+1; i <= 6; i++) {
                    $('#li'+i).attr('disabled',true);
                }
            }
        }

        function pageItemCall() {
            var idx = event.srcElement.innerText;
            if (idx === "上一页") {
                for (i = 1; i <= 5; i++) {
                    if ($('#li'+i).hasClass('active')) {
                        selectUserByPage(parseInt($('#li'+i).text())-1);
                        return;
                    }
                }
            }
            if (idx=== "下一页") {
                for (i = 1; i <= 5; i++) {
                    if ($('#li'+i).hasClass('active')) {
                        selectUserByPage(parseInt($('#li'+i).text())+1);
                        return;
                    }
                }
            }
            selectUserByPage(parseInt(idx));
        }

        function ReFreshCurrentPage() {
            for (i = 1; i <= 5; i++) {
                if ($('#li'+i).hasClass('active')) {
                    selectUserByPage(parseInt($('#li'+i).text()));
                    return;
                }
            }
        }
    </script>

</head>
<body onload="selectUserByPage(1)">

    <div class="admin-panel scrollarea container-fluid border">

        <div id="msg-alert" class="mt-3 mb-3">
            <div class="alert alert-info alert-dismissible">
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                <strong>信息!</strong> 请注意这个信息。
            </div>
        </div>
        <!-- 模态框 -->
        <div class="container mt-3 text-center">

            <h3>用户管理</h3>
            <form action="logout" method="post" >
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#AddUserModal">
                添加用户
            </button>
            <button type="button" class="btn btn-primary" onclick="ReFreshCurrentPage()">
                刷新按钮
            </button>
            <button type="submit" class="btn btn-primary" >
                退出登录
            </button>
            </form>
        </div>

        <div class="container mt-3">
            <form action="">
                <div class="row">
                    <div class="input-group col">
                        <span class="input-group-text">姓名查询</span>
                        <input type="text" id="selectByName" class="form-control" placeholder="Enter name" name="name">
                    </div>
                    <div class="col">
                        <button type="button" onclick="selectUserByName()" class="btn btn-primary">
                            查询用户
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!--        修改-->
        <div class="modal fade" id="UpdateUserModal">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">修改用户</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <!-- 模态框内容 -->
                    <div class="modal-body">
                        <div><!--form-->
                            <div class="form-floating">
                                <input type="text" class="form-control" id="UpdateUserId" placeholder="Enter code" readonly>
                                <label id="label" for="UpdateUserId">ID</label>
                            </div>
                            <div class="form-floating">
                                <input type="text" class="form-control" id="UpdateUserCode" oninput="UpdValidIn()" placeholder="Enter code">
                                <label id="updcodelabel" for="UpdateUserCode">账号</label>
                            </div>
                            <div class="form-floating mb-3 mt-3">
                                <input type="text" class="form-control" id="UpdateUserName" oninput="UpdValidIn()" placeholder="Enter name">
                                <label id="updnamelabel" for="UpdateUserName">名称</label>
                            </div>
                            <div class="form-floating mb-3 mt-3">
                                <input type="text" class="form-control" id="UpdateUserAvatar" oninput="UpdValidIn()" placeholder="Enter name">
                                <label for="UpdateUserAvatar">头像</label>
                            </div>

                            <div class="d-grid">
                                <button id="UpdateUserBtn" type="button" disabled onclick="updateUser()"
                                        class="btn btn-primary btn-block" data-bs-dismiss="modal">确定
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <!--        删除-->
        <div class="modal fade" id="DeleteUserModal">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">删除用户</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <!-- 模态框内容 -->
                    <div class="modal-body">
                        <div><!--form-->
                            <div class="form-floating mb-3 mt-3">
                                <input type="text" class="form-control" id="DeleteUserId" placeholder="Enter code"
                                       readonly>
                                <label for="DeleteUserId">ID</label>
                            </div>
                            <div class="form-floating mb-3 mt-3">
                                <input type="text" class="form-control" id="DeleteUserCode" placeholder="Enter code"
                                       readonly>
                                <label for="DeleteUserCode">账号</label>
                            </div>
                            <div class="form-floating mb-3 mt-3">
                                <input type="text" class="form-control" id="DeleteUserName" placeholder="Enter name"
                                       readonly>
                                <label for="DeleteUserName">名称</label>
                            </div>

                            <div class="d-grid">
                                <button type="button" onclick="deleteUser()" class="btn btn-primary btn-block"
                                        data-bs-dismiss="modal">确定删除
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <!--        增加-->
        <div class="modal fade" id="AddUserModal">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">添加用户</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <!-- 模态框内容 -->
                    <div class="modal-body">
                        <div><!--form-->
                            <div class="form-floating">
                                <input type="text" class="form-control" id="AddUserCode" oninput="validIn()" placeholder="Enter code">
                                <label id="codelabel" for="AddUserCode">账号</label>
                            </div>
                            <div class="form-floating mb-3 mt-3">
                                <input type="text" class="form-control" id="AddUserName" oninput="validIn()" placeholder="Enter name">
                                <label id="namelabel" for="AddUserName">名称</label>
                            </div>
                            <div class="form-floating mt-3 mb-3">
                                <input type="text" class="form-control" id="AddUserPassword" oninput="validIn()"
                                       placeholder="Enter password">
                                <label id="pwdlabel" for="AddUserPassword">密码</label>
                            </div>
                            <div class="mt-3 mb-3">
                                <div class="btn-group">
                                    <div class="form-check">
                                        <input type="radio" class="btn-check" id="add_user_authority1"
                                               name="AddUserAuthority" value="1" >
                                        <label class="btn btn-outline-primary" for="add_user_authority1">管理员</label>
                                    </div>

                                    <div class="form-check">
                                        <input type="radio" class="btn-check" id="add_user_authority2"
                                               name="AddUserAuthority" value="2" autocomplete="off">
                                        <label class="btn btn-outline-primary"
                                               for="add_user_authority2">企业用户</label>
                                    </div>

                                    <div class="form-check">
                                        <input type="radio" class="btn-check" id="add_user_authority3"
                                               name="AddUserAuthority" value="3" autocomplete="off" checked>
                                        <label class="btn btn-outline-primary"
                                               for="add_user_authority3">普通用户</label>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3 mb-3">
                                <div class="btn-group">
                                    <div class="form-check">
                                        <input type="radio" class="btn-check" id="add_user_gender0" name="AddUserGender"
                                               value="0" autocomplete="off" checked>
                                        <label class="btn btn-outline-primary" for="add_user_gender0">男</label>
                                    </div>

                                    <div class="form-check">
                                        <input type="radio" class="btn-check" id="add_user_gender1" name="AddUserGender"
                                               value="1" autocomplete="off">
                                        <label class="btn btn-outline-primary" for="add_user_gender1">女</label>
                                    </div>
                                </div>
                            </div>


                            <div class="form-floating mt-3 mb-3">
                                <input type="text" class="form-control" id="AddUserAvatar" oninput="validIn()"
                                       placeholder="Enter password">
                                <label for="AddUserAvatar">头像</label>
                            </div>
                            <div class="d-grid">
                                <button id="addUserBtn" type="button" disabled onclick="addUser()"
                                        class="btn btn-primary btn-block" data-bs-dismiss="modal">不允许空的账号、用户名及密码
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <!--        用户表-->
        <div class="container mt-3">
            <h2 class="text-center mt-3 mb-3">用户表</h2>
            <table class="table table-hover" id="user-table">
                <thead class="table-light">
                <tr>
                    <th>ID</th>
                    <th>账号</th>
                    <th>名称</th>
                    <th>头像</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="user-tbody">
                </tbody>
            </table>
        </div>

        <!-- 分页按钮 -->
        <div class="container mt-3 text-center">
            <div class="btn-group">
                <button type="button" id="li0" onclick="pageItemCall()" class="btn btn-outline-primary">上一页</button>
                <button type="button" id="li1" onclick="pageItemCall()" class="btn btn-outline-primary">1</button>
                <button type="button" id="li2" onclick="pageItemCall()" class="btn btn-outline-primary">2</button>
                <button type="button" id="li3" onclick="pageItemCall()" class="btn btn-outline-primary">3</button>
                <button type="button" id="li4" onclick="pageItemCall()" class="btn btn-outline-primary">4</button>
                <button type="button" id="li5" onclick="pageItemCall()" class="btn btn-outline-primary">5</button>
                <button type="button" id="li6" onclick="pageItemCall()" class="btn btn-outline-primary">下一页</button>
            </div>
        </div>
    </div>
    <script src="static/bootstrap-5.1.3-dist/bootstrap.bundle.min.js"></script>
</main>
</body>
</html>
